<!--
 @description 帮助中心-内容列表
 @fileName index.vue
 @author zengqiongying
 @created 2022/01/10 09:53:12
-->
<template>
  <div :class="{'qup-full-page':!showEdit}">
    <template v-if="showEdit">
      <edit-page
        ref="refAddPage"
        :page-show.sync="showEdit"
        :detail-data="detailData"
        :category="category"
        :content-type="contentType"
        @success="refreshTabContent"
      />
    </template>
    <template v-if="showDetail">
      <detail-page
        ref="refDetailPage"
        :page-show.sync="showDetail"
        :detail-data="detailData"
      />
    </template>
    <div v-show="showHome" class="content-container">
      <el-tabs
        v-if="tabList.length"
        v-model="activeTabCode"
        @tab-click="clickTabChange"
      >
        <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.classifyName" :name="item.classifyCode">
          <TableData ref="refTable" :tab-index="index" :classify-code="item.classifyCode" :classify-name="item.classifyName" :buttons="buttons" @edit="handleEdit" @detail="handleDetail" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getModularList } from '@/api/modular'
import { queryBtnList } from '@/api/permissions'
import EditPage from './Add'
import DetailPage from './Detail'
import TableData from './TableData'
export default {
  name: 'HelpContent',
  components: { EditPage, DetailPage, TableData },
  data() {
    return {
      activeTabCode: '',
      tabList: [],
      category: '',
      contentType: '',
      detailData: '',
      showEdit: false,
      showDetail: false,
      buttons: [] // 表格行内可操作按钮
    }
  },

  computed: {
    showHome() {
      return !this.showEdit && !this.showDetail
    }
  },
  watch: {
    showEdit(val, oldVal) {
      if (!val) {
        this.detailData = ''
      }
    },
    showDetail(val, oldVal) {
      if (!val) {
        this.detailData = ''
      }
    }
  },

  async created() {
    this.getBtnsList()
    this.tabList = await getModularList('content')
    if (this.tabList.length) {
      this.activeTabCode = this.tabList[0].classifyCode
      this.$nextTick(() => {
        this.refreshTabContent(true)
      })
    }
  },
  activated() {},

  mounted() {},

  methods: {
    getBtnsList() {
      const menuCode = this.$route.query.menuCode
      if (!menuCode) return
      const buttonGroupCode = 'inRow'
      queryBtnList({ menuCode, buttonGroupCode }).then(res => {
        // res.data.groovyList
        this.buttons = (res.data && res.data.groovyList) || []
      })
    },
    clickTabChange(val) {
      const index = this.tabList.findIndex(v => v.classifyCode === this.activeTabCode)
      if (index > -1) {
        this.$refs.refTable[index] && this.$refs.refTable[index].refreshTree()
      }
      this.refreshTabContent(true)
    },
    // 刷新当前页签表格
    refreshTabContent(flag) {
      this.$nextTick(() => {
        const index = this.tabList.findIndex(v => v.classifyCode === this.activeTabCode)
        if (index > -1) {
          this.$refs.refTable[index] && this.$refs.refTable[index].searchTableData(flag)
          this.$refs.refTable[index] && this.$refs.refTable[index].refreshTableHeight()
        }
      })
    },
    handleEdit({ category, contentType, row }) {
      this.category = category
      this.contentType = contentType
      this.detailData = row || ''
      this.$nextTick(() => {
        this.showEdit = true
      })
    },
    handleDetail(row) {
      const tab = this.tabList.find(v => v.classifyCode === this.activeTabCode)
      this.detailData = { ...(row || {}), ...{ moduleName: tab && tab.classifyName || '' }}

      this.$nextTick(() => {
        this.showDetail = true
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.content-container{
  position: relative;
  height: 100%;
  /deep/ .el-tabs{
    height: 100%;
    position: relative;
    .el-tabs__content{
      position: relative;
      height: calc(100% - 55px);
      .el-tab-pane{
        height: 100%;
      }
    }
  }
}
</style>
